<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例展示列表页</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <!-- header -->
  <header class="autorow">
    <section id="header" class="row automargin autoheight all-flex jf-between">
      <div class="logo autoheight all-flex">
        <img src="./images/微豆科技.gif" alt="">
      </div>
      <nav class=" header-nav autoheight">
        <ul class="nav-items autorow autoheight flex jf-evenly">
          <li class="nav-item all-flex autoheight">
            <a href="javascript:;" class="fs17 common-gray1">首页</a>
          </li>
          <li class="nav-item all-flex autoheight">
            <a href="javascript:;" class="fs17 common-gray1">解决方案</a>
          </li>
          <li class="nav-item all-flex autoheight">
            <a href="javascript:;" class="fs17 common-gray1">资讯中心</a>
          </li>
          <li class="nav-item all-flex autoheight">
            <a href="javascript:;" class="fs17 common-gray1">案例展示</a>
          </li>
          <li class="nav-item all-flex autoheight">
            <a href="javascript:;" class="fs17 common-gray1">联系微豆</a>
          </li>
        </ul>
      </nav>
    </section>
  </header>

  <!-- banner -->
  <section id="banner" class="autorow">
    <section class="banner autorow">
      <img src="./images/案例展示列表页0.gif" alt="" class="autorow">
    </section>
  </section>

  <!-- main -->
  <main id="main" class="autorow">
    <!-- 内容头部 -->
    <div class="main-nav autorow flex">
      <div class="main-nav-content row automargin autoheight flex flex-c jf-center">
        <!-- 面包屑 -->
        <ul class="bread-crumb-items all-flex autorow">
          <li class="bread-crumb-item">
            <a href="javascript:;" class="fs15 common-gray1">首页</a>
          </li>
          <span class="fs15 common-gray1">&gt;</span>
          <li class="bread-crumb-item">
            <a href="javascript:;" class="fs15 common-gray1">案例展示</a>
          </li>
          <span class="fs15 common-gray1">&gt;</span>
          <li class="bread-crumb-item">
            <a href="javascript:;" class="fs15 common-gray1">网页案例</a>
          </li>
        </ul>
        <!-- 标题 -->
        <div class="title autorow all-flex jf-center">
          <div class="title-content autoheight center">
            <div class="fs24 common-gray2">我们的优秀作品</div>
            <p class="fs12 common-gray1 mt10">OUR CASES</p>
          </div>
        </div>
        <!-- 导航栏 -->
        <ul class="main-nav-items autorow all-flex jf-center">
          <li class="main-nav-item autoheight all-flex">
            <a href="javascript:;" class="common-gray1 fs17">
              网页作品
            </a>
          </li>
          <li class="main-nav-item autoheight all-flex">
            <a href="javascript:;" class="common-gray1 fs17">
              APP作品
            </a>
          </li>
          <li class="main-nav-item autoheight all-flex">
            <a href="javascript:;" class="common-gray1 fs17">
              H5作品
            </a>
          </li>
          <li class="main-nav-item autoheight all-flex">
            <a href="javascript:;" class="common-gray1 fs17">
              平面作品
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="main-bg">
      <!-- 内容 -->
      <div class="main-content autorow flex">
        <ul class="content autoheight automargin flex jf-between flex-w">
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 2.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 1.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 3.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 4.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>

          <li class="item">
            <div class="item-img">
              <img src="./images/图层 6.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 7.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 8.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 9.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>

          <li class="item">
            <div class="item-img">
              <img src="./images/图层 10.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 11.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 12.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 13.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>

          <li class="item">
            <div class="item-img">
              <img src="./images/图层 14.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 15.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 16.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="./images/图层 17.png" alt="">
            </div>
            <div class="item-text autorow all-flex jf-center flex-c">
              <p class="fs14 ">2017设计集锦</p>
              <p class="fs10 mt10 common-gray1">2017-08-16</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- 分页 -->
      <ul class="pagination row automargin flex jf-center">
        <li class="item autoheight">
          <a href="javascript:;" class="autoheight autorow center">
            1
          </a>
        </li>
        <li class="item autoheight">
          <a href="javascript:;" class="autoheight autorow center">
            2
          </a>
        </li>
        <li class="item autoheight">
          <a href="javascript:;" class="autoheight autorow center">
            3
          </a>
        </li>
        <li class="item autoheight">
          <a href="javascript:;" class="autoheight autorow center">
            ...
          </a>
        </li>
      </ul>
    </div>

  </main>

  <!-- footer -->
  <footer class="autorow flex flex-c">
      <div class="about autorow flex jf-center">
          <img src="./images/about_03.png" alt="">
      </div>

      <div class="contact row automargin all-flex jf-evenly">
        <div class="all-flex">
          <img src="./images/phone.png" alt="" class="mr10">
          <p class="fs18 common-gray4">400-889-7654</p>
        </div>

        <p class="fs12 common-gray3">COPYRIGHT (C) 2017 微豆科技有限公司版权所有 . ALL RIGHTS RESERVED</p>

        <p class="fs12 common-gray3">粤ICP备12022584号-3       法律顾问：广东晟晨律师事务所-张勇律师</p>
      </div>
  </footer>
</body>

</html>